import React, { Component } from 'react'

import {
    Button,
    InputItem,
    WhiteSpace,
    WingBlank
} from 'antd-mobile'

export default class HomeIndex extends Component {

    constructor() {
        super()
        this.state = {
            userPhone: ''
        }
    }

    componentDidMount() {
        setTimeout(() => {
            if (window.plus && window.plus.nativeUI) {
                window.plus.nativeUI.toast('plus ready', {background: 'rgba(0, 0, 0, .5)'});
            }
        }, 1000)
    }

    phoneIpt = val => {
        this.setState({userPhone: val})
    }

    render() {
        console.log('=================================')
        console.log(this.props)
        console.log('=================================')
        return (
            <div>
                Home Index
                <Button>EMPTY</Button>
                {/* 在开发过程中，不用在单独的组件上添加padding/margin样式 */}
                <WhiteSpace size="lg"/>
                <WingBlank size="sm">
                    <InputItem onChange={this.phoneIpt} type="phone">用户手机号</InputItem>
                    <Button size="small" type="ghost">GHOST</Button>
                    <Button onClick={
                        () => {
                            console.log(this.state.userPhone.replace(/\s/g, ''))
                        }
                    } type="primary">提交</Button>
                    <Button type="warning">WARNING</Button>
                </WingBlank>
            </div>
        )
    }
}